<template>
  <div class="Todos">
    <div v-for="item of store.getters.filteredTodos" :key='item.id' class="todo-item">
      <el-checkbox v-model="item.isFinished" :disabled='item.isFinished' @change="toggleTodo(item.id)"></el-checkbox>
      <span :class='{ finished: item.isFinished, text: true }'>{{item.text}}</span>
      <span class="start">起始时间：{{moment(item.date).format('YYYY-MM-DD, hh:mm:ss')}}</span>
      <span class="end">截止时间：{{moment(item.time).format('YYYY-MM-DD, hh:mm:ss')}}</span>
      <!-- <span>{{moment(item.date).format('YYYY-MM-DD, hh:mm:ss')}} - {{moment(item.time).format('YYYY-MM-DD, hh:mm:ss')}}</span> -->
      <el-button @click="removeTodo(item.id)" type='danger'>删除</el-button>
    </div>
  </div>
</template>

<script setup>
  import { useStore } from 'vuex';
  import { reactive } from 'vue';
  import moment from 'moment';

  const store = useStore();

  // const selected = reactive([])

  const toggleTodo = () => {
    // selected.length > 0 ? selected.forEach(id => {
    //   store.dispatch('toggleTodo', id);
    // }) : alert('请先选中需要设置成完成状态的Todo Item')
    store.dispatch('toggleTodo', id)
  }

  // const selectTodo = (id, a, b, c) => {
  //   selected.push(id);
  // }

  const removeTodo = (id) => {
    store.dispatch('removeTodo', id);
  }
</script>

<style lang="scss">
  .finished {
    text-decoration: line-through;
  }
  .Todos {
    width: 100%;
    .todo-item {
      display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: 10px;
      .text {
        margin-left: 10px;
        font-size: 16px;
        font-weight: 600;
        flex: 1;
        min-width: 300px;
      }
      .start, .end {
        margin-right: 5px;
      }
    }
  }
</style>